import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { useRecoilState } from 'recoil'
import { CollectionsWaterfallMock } from './mock'
import { Link } from 'react-router-dom'

interface ICollectionsWaterfallProps {
    type?: string
    userId?: string
}

export default function CollectionsWaterfall(props: ICollectionsWaterfallProps) {
    const [collections, setCollections] = useRecoilState(CollectionsWaterfallMock)
    const [itemWidth, setItemWidth] = useState<any>()
    const [width, setWidth] = useState<any>()

    useEffect(() => {
        $(`.${style.container}`).outerWidth(true)! > 1050 ? setWidth('70%') : setWidth('100%')
    }, [])

    useEffect(() => {
        setItemWidth(($(`.${style.container}`).width()! - 50) / 3 + 'px')
    }, [$(`.${style.container}`).outerWidth(true)!])

    return (
        <div
            className={style.container}
            style={{
                ['--item-width' as any]: itemWidth,
                ['--width-' as any]: width
            }}>
            {collections.map((item, index) => {
                return (
                    <div className={style.item} key={index}>
                        <div className={style.img__list}>
                            <div className={style.img__item}>
                                <div className={style.mask} />
                                <div className={style.img__left}>
                                    <img src={item.imgList[0]} />
                                </div>
                                <div className={style.img__right}>
                                    <img src={item.imgList[1]} />
                                    <img src={item.imgList[2]} />
                                </div>
                            </div>
                            <span className={style.collection__title}>{item.title}</span>
                        </div>
                        <span className={style.collections__name}>
                            {item.imgNum} photos · 摄影师：
                            <Link to={'/user/' + item.curatedId}>{item.curatedName}</Link>
                        </span>
                        <div className={style.tag__list}>
                            {item.tagList.map((item, index) => {
                                return (
                                    <span className={style.item} key={index}>
                                        {item}
                                    </span>
                                )
                            })}
                        </div>
                    </div>
                )
            })}
        </div>
    )
}
